Reader Mode is a feature that allows users to focus on the content by hiding the sidebars and other UI elements. When enabled, it provides a clean, distraction-free reading experience.

Configuration

Reader Mode is enabled by default. To disable it, you can remove the component from your layout configuration in quartz.layout.ts:

// Remove or comment out this line
Component.ReaderMode(),

Usage

The Reader Mode toggle appears as a button with a book icon. When clicked:

• Sidebars are hidden
• Hovering over the content area reveals the sidebars temporarily

Unlike Dark Mode, Reader Mode state is not persisted between page reloads but is maintained during SPA navigation within the site.

Customization

You can customize the appearance of Reader Mode through CSS variables and styles. The component uses the following classes:

• .readermode: The toggle button
• .readerIcon: The book icon
• [reader-mode="on"]: Applied to the root element when Reader Mode is active

Example customization in your custom CSS:

.readermode {
  // Customize the button
  svg {
    stroke: var(--custom-color);
  }
}